<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
// 固定导航栏颜色
uni.setNavigationBarColor({
  frontColor: '#000000',
  backgroundColor: '#ffffff',
})
// 进入页面获取字段，进行判断
const query = defineProps<{
  title: string
}>()
console.log(query.title)
uni.setNavigationBarTitle({ title: query.title })

// ！！！！！！！！！留言反馈页面操作 ！！！！！！！！！！！！！！！！！！！！！！！！！！！
const maxlength = ref(200) // 最大字段
const textareaValue = ref('') // 提交的反馈内容
// 打印出输入字段
const onInput = () => {
  onDiscolor() // 调用按钮变色判断方法
  // console.log(textareaValue.value)
}
// 调用相机获取的图片
const select = (e: any) => {
  console.log(e) // 打印出来的文件信息
}

// 调用弹出层
const popup = ref<{
  open: () => void
  close: () => void
}>()
// 弹出层反馈相关类型
const popupTypeList = [{ type: '手机客户端相关' }, { type: '取餐机设备相关' }, { type: '其他反馈' }]
// 弹出层类型点击变色
const activeIndex = ref()
const typeName = ref('') // 提交的反馈类型
const colorChange = (index: any, item: any) => {
  activeIndex.value = index
  typeName.value = item
  onDiscolor() // 调用按钮变色判断方法
  setTimeout(() => {
    popup.value?.close()
  }, 100)
}
// 封装按钮变色判断方法
const discolor = ref(false)
const onDiscolor = () => {
  if (typeName.value && textareaValue.value.length > 0) {
    discolor.value = true
  } else {
    discolor.value = false
  }
}
// 提交判断
const onSubmit = () => {
  if (!typeName.value || !(textareaValue.value.length > 0)) {
    if (!typeName.value) {
      uni.showToast({
        icon: 'none',
        title: '请选择反馈类型',
      })
      return
    } else {
      uni.showToast({
        icon: 'none',
        title: '请输入反馈内容',
      })
      return
    }
  } else {
    console.log(111) // 在这边调用提交按钮接口
  }
}

// 用户点击返回按钮，二次弹窗提示用户
// uni.enableAlertBeforeUnload({
//   message: '已编辑内容将不会保存',
// })

// !!!!!!!!!!!!!!!!!!!!!常见问题页面！！！！！！！！！！！！！！！！！！！！！！！！
/**
 * @param userProblemList  常见问题
 */
const userProblemList = [
  {
    title: '1.客服上班时间？',
    src: '/static/images/Q.png',
    image: '/static/images/A.png',
    text: '9点-21点（周一至周五）',
  },
  {
    title: '2.取消订单取消不了怎么办？',
    src: '/static/images/Q.png',
    image: '/static/images/A.png',
    text: '亲爱的麦粉您好，非常抱歉，由于您这边订单已经支付完成我们是不支持退款的哦！',
  },
  {
    title: '3.餐品有问题怎么反馈？',
    src: '/static/images/Q.png',
    image: '/static/images/A.png',
    text: '亲爱的麦粉您好，非常抱歉让您遇到这样的情况！我们深表愧疚，食材问题我们非常重视，我们选用食材都是当天采购，绝对新鲜的。请联系我们在线客服，我们一定第一时间给您解决!',
  },
  {
    title: '4.机器出餐失败怎么办？',
    src: '/static/images/Q.png',
    image: '/static/images/A.png',
    text: '我先替你暴打机器一顿！请尽快联系我们在线客服，我们一定第一时间给您解决！',
  },
  {
    title: '5.已充值的金额可否申请退款？',
    src: '/static/images/Q.png',
    image: '/static/images/A.png',
    text: '亲爱的麦粉，非特殊原因不支持退款哦~有特殊原因请咨询我们客服中心',
  },
  {
    title: '6.为什么我的优惠券不能用?',
    src: '/static/images/Q.png',
    image: '/static/images/A.png',
    text: '辛苦检查一下优惠券是否已经过期或者不符合消费条件，优惠券页面会注明不可用的原因的。',
  },
  {
    title: '7.为什么邀请了好友没有收到优惠券?',
    src: '/static/images/Q.png',
    image: '/static/images/A.png',
    text: '老用户邀请了新用户，新用户必须下单且订单完成之后老用户才会得到优惠券！',
  },
  {
    title: '8.如何加盟？',
    src: '/static/images/Q.png',
    image: '/static/images/A.png',
    text: '感谢小伙伴对我们的认可！可联系客服了解详情 19128769631',
  },
]
</script>

<template>
  <!-- 留言反馈页面 -->
  <view class="userFeedback" v-if="query.title === '留言反馈'">
    <!-- 反馈类型 -->
    <view class="feedback_Type" @tap="popup?.open()">
      <text>反馈类型</text>
      <text class="select_Type" :class="{ changeColor: typeName }">{{
        typeName || '请选择类型'
      }}</text>
      <text class="icon-right"></text>
    </view>
    <!-- 输入文字 and 上传按钮 -->
    <view class="feedback_Input">
      <textarea
        @input="onInput"
        v-model="textareaValue"
        class="feedback_Textarea"
        :maxlength="maxlength"
        placeholder="请输入反馈内容"
      >
      </textarea>

      <view class="promptText"
        >最多上传6张，选填
        <view class="maxlength"> {{ textareaValue.length }} /{{ maxlength }}</view></view
      >
      <!-- 上传按钮 -->
      <uni-file-picker limit="6" @select="select"></uni-file-picker>
    </view>
    <!-- 提交按钮 -->
    <button class="submit" @tap="onSubmit" :class="{ submitColor: discolor }">提交</button>
    <!-- 弹出层 -->
    <uni-popup ref="popup" type="bottom" class="uni_popup">
      <view class="text_Type">
        <view
          @tap="colorChange(index, item.type)"
          :class="{ active: index === activeIndex }"
          class="popupTypeList"
          v-for="(item, index) in popupTypeList"
          :key="item.type"
          >{{ item.type }}</view
        >
        <view class="placeholder"></view>
        <view class="close" @tap="popup?.close">取消</view>
      </view>
    </uni-popup>
  </view>
  <!-- 常见问题页面 -->
  <view class="userProblem" v-else>
    <view class="userProblem_view" v-for="(item, index) in userProblemList" :key="index">
      <uni-collapse>
        <uni-collapse-item class="uni_collapse_item" :thumb="item.src" :title="item.title">
          <view class="content">
            <text class="contentText">{{ item.text }}</text>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  </view>
</template>

<style lang="scss">
//
page {
  background-color: #f5f5f5;
}
.userFeedback {
  .feedback_Type {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24rpx;
    padding: 0 40rpx 0 36rpx;
    width: 702rpx;
    height: 96rpx;
    font-size: 28rpx;
    border-radius: 16rpx;
    color: #000000e5;
    background-color: $uni-bg-color;
    .select_Type {
      color: #00000080;
      position: absolute;
      right: 76rpx;
    }
    .changeColor {
      color: #000000e5;
    }
  }
  .feedback_Input {
    margin: 24rpx 24rpx 24rpx 24rpx;
    padding: 24rpx;
    width: 702rpx;
    border-radius: 16rpx;
    background-color: $uni-bg-color;
    .feedback_Textarea {
      padding: 32rpx 28rpx;
      width: 92%;
      font-size: 24rpx;
      border-radius: 16rpx;
      color: #000000e5;
      background-color: $uni-bg-color-grey;
    }
    .promptText {
      position: relative;
      font-size: 24rpx;
      margin: 30rpx 0 24rpx 0;
      color: #00000080;
      .maxlength {
        position: absolute;
        top: -70rpx;
        right: 20rpx;
        font-size: 24rpx;
        color: #0000004d;
      }
    }
    .uploading {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      padding: 50rpx;
      font-size: 24rpx;
      width: 200rpx;
      height: 200rpx;
      border-radius: 16rpx;
      color: #0000004d;
      background-color: #f5f5f5;
      .icon-camera-plus {
        font-size: 60rpx;
      }
    }
  }
  .submit {
    position: absolute;
    bottom: 76rpx;
    margin: 0 24rpx;
    width: 702rpx;
    height: 96rpx;
    line-height: 96rpx;
    font-size: 32rpx;
    border-radius: 44rpx;
    color: #fff;
    background-color: #0000001a;
  }
  // 按钮变色
  .submitColor {
    background-color: $uni-color-motif;
  }
  .uni_popup {
    .text_Type {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      font-size: 30rpx;
      color: #000000e5;
      .popupTypeList {
        padding-left: 50rpx;
        height: 96rpx;
        line-height: 96rpx;
        background-color: #fff;
      }
      .popupTypeList:first-child {
        border-radius: 32rpx 32rpx 0 0;
      }
      .active {
        color: $uni-color-motif;
        background-color: #f5f5f5;
      }
      .placeholder {
        height: 16rpx;
        background-color: #f5f5f5;
      }
      .close {
        width: 100%;
        height: 96rpx;
        line-height: 96rpx;
        text-align: center;
        background-color: #fff;
      }
    }
  }
}
.userProblem {
  padding: 24rpx;
  .userProblem_view {
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    .uni_collapse_item {
      font-size: 28rpx;
      .content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 16rpx 32rpx;
        color: #00000080;
      }
    }
  }
}
</style>
